<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>消息</title>

    <link rel="stylesheet" href="../../static/layui/css/layui.css">
    <link rel="stylesheet" href="../../static/css/base2.css">
    <!-- <link rel="stylesheet" href="css/font.css"> -->
    <link rel="stylesheet" href="../../static/css/chats.css">
<!--    <link rel="shortcut icon" th:href="@{/favicon.ico}"/>-->
    <link rel="stylesheet" th:href="@{/static/bootstrap/css/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{/static/css/adminStyle.css}">

    <script th:src="@{/static/js/jquery-3.3.1.min.js}"></script>
    <script th:src="@{/static/bootstrap/js/bootstrap.min.js}"></script>
    <link rel="shortcut icon" th:href="@{/favicon.ico}"/>


</head>

<body>
<div class="text-right ">
    <span class="glyphicon glyphicon-hand-right" aria-hidden="true"></span>
    <a th:href="@{toAdminHome}" >点此返回主页</a>
</div>
<!--<div class="header">-->
<!--    <nav class="navbar navbar-inverse">-->
<!--        <div class="container-fluid">-->
<!--            <div class="navbar-header">-->
<!--                <a class="navbar-brand" title="logoTitle" href="#">-->
<!--                    <span class="glyphicon glyphicon-leaf"></span>&nbsp;精品课程</a>-->
<!--            </div>-->
<!--            <div class="collapse navbar-collapse">-->
<!--                <ul class="nav navbar-nav navbar-right">-->
<!--                    <li role="presentation">-->
<!--                        <a href="#">当前用户：<span class="badge" th:text="${session.admin.getUsername() }"></span></a>-->
<!--                    </li>-->

<!--&lt;!&ndash;                    <li>&ndash;&gt;-->
<!--&lt;!&ndash;                        <a th:href="@{/adminChat}">消息</a>&ndash;&gt;-->
<!--&lt;!&ndash;                    </li>&ndash;&gt;-->
<!--                    <li>-->
<!--                        <a th:href="@{/adminLogout}">-->
<!--                            <span class="glyphicon glyphicon-lock"></span>退出登录</a>-->
<!--                    </li>-->
<!--                </ul>-->
<!--            </div>-->
<!--        </div>-->
<!--    </nav>-->
<!--</div>-->

<div class="box" id="chat" v-cloak>
    <!-- 聊天列表 -->
    <div class="chat-list">
        <!-- 顶部个人信息部分 -->
        <div class="header" v-show="flagOfSearch">
            <div class="pic2">
                <img :src="userPicture" alt="">
            </div>
            <span v-text="username"></span>
            <div class="search-friends" @click='showBigSearch' style="background-image: url(../../static/img/search.png)"></div>
        </div>
        <!-- 巨大的搜索框 -->
        <div class="search-input" v-show="!flagOfSearch">
            <img src="../../static/img/search.png" class="search-input-img" alt="">
            <input type="text" @blur='showSmallSearch' @keyup.13='showSmallSearch' ref="inputVal">
        </div>


        <!-- 聊天列表 -->
        <div class="friends">
            <ul ref="friendList">
                <li :class='{current2:index == focusID}' v-for="(item,index) in friendsList" :key="index" @click='getHistory(item.friendName);getStaus(item.friendName);itemFoucs(index,item)' :ref="item.friendName">

                    <div class="friend-pic" @mouseenter='showMenu' @mouseleave='hiddenMenu'>
                        <span v-if="item.unread">{{item.unread}}</span>
                        <img  :src="item.friendPicture" alt="">
<!--                        <a :style='{display: isShow}' @click="skip_user(item.friendName)">主页</a>-->
                    </div>
                    <div class="name">{{item.friendName}}</div>
                    <div class="shortcut">{{item.lastMessage}}</div>
                    <div class="time">{{item.sendTime | formateDate}}</div>
                </li>
            </ul>

        </div>
    </div>

    <!-- 聊天框 -->
    <div class="chat-content">
        <div class="unread" v-show="hasUnread">
            <span @click='scrollBottom'>&nbsp;&nbsp;↓↓ 有新消息未读&nbsp;&nbsp;|</span>
            <span @click='hideUnreadBtn'>&nbsp;×&nbsp;</span>
        </div>
        <div class="firend-name">{{currentFriendName}}</div>
        <div class="chat-middle" id="chatContainer" @scroll='scrollHistory($event)'>
            <!-- <div class="chat-time">
                <div class="line"></div>
                <span>2019/12/27 12:00</span>
                <div class="line"></div>
            </div> -->
            <div class="content">
                <ul v-if="currentFriendName != ''">
                    <li v-if="item.sendUser==username&&item.content != ''" class="me" v-for="(item,index) in currentChatHistory ">
                        <div class="image-me">
                            <img :src="userPicture" alt=" ">
                        </div>
                        <span>
                                {{item.content}} <br />
                                <div class="line"></div>
                                <div class="sendTime">{{item.sendTime}}</div>
                            </span>
                    </li>
                    <li v-else-if="item.content != ''" class="you">
                        <div class="image-friend">
                            <img :src="currentFriendPic" alt=" ">

                        </div>
                        <span>
                                {{item.content}}
                                <div class="line"></div>
                                <div class="sendTime ">{{item.sendTime}}</div>
                            </span>
                    </li>
                </ul>
                <div class="chatMsg" v-else>
                    请和你的好友开始聊天吧!
                </div>
            </div>
        </div>
        <!-- 当没有选中朋友时 输入框不能输入东西 其他也都不能点击 -->
        <div v-if="currentFriendName == ''" class="chat-bottom">
            <textarea ref="messageInput" cols="30" rows="10" placeholder="请输入要发送的消息..." id="chat-bar" v-model="msgContent" disabled></textarea>
<!--            <a href="javascript:;" class="chat-faces">-->
<!--                <img src="../../static/img/faces.png " alt=" ">-->
<!--            </a>-->
<!--            <a href="javascript:;" class="chat-img">-->
<!--                <img src="../../static/img/photo.png" alt=" ">-->
<!--            </a>-->
            <button class="chat-send" @click='websocketSend' disabled>发送</button>
        </div>
        <div v-else class="chat-bottom">
            <textarea ref="messageInput" cols="30" rows="10" placeholder="请输入要发送的消息..." id="chat-bar" v-model="msgContent" @keyup.13='websocketSend'></textarea>
<!--            <a href="# " class="chat-faces">-->
<!--                <img src="../../static/img/faces.png " alt=" ">-->
<!--            </a>-->
<!--            <a href="# " class="chat-img">-->
<!--                <img src="../../static/img/photo.png" alt=" ">-->
<!--            </a>-->
            <button class="chat-send" @click='websocketSend'>发送</button>
        </div>

    </div>
</div>


</body>

</html>

<script src="../../static/js/jquery.min.js"></script>
<script src="../../static/js/vue.min.js"></script>
<script src="../../static/js/axios.js"></script>
<script src="../../static/layui/layui.all.js"></script>
<script src="../../static/js/isLogin.js"></script>
<script src="../../static/js/nav.js"></script>
<script src="../../static/js/adminChat.js"></script>